<template>
  <div class="common-layout">
    <el-container>
      <el-header>
        <h1 class="welcome">欢迎跳转风控页面</h1>
      </el-header>
      <el-container>
        <el-aside width="200px" class="navigate">
          <el-row class="tac">
            <el-col :span="24">
              <el-menu
                default-active="sceneManager"
                class="el-menu-vertical-demo"
                router
              >
                <el-menu-item index="sceneManager">
                  <el-icon><management /></el-icon>
                  <span>场景管理</span>
                </el-menu-item>
                <el-menu-item index="blackWhiteManager">
                  <el-icon><stamp /></el-icon>
                  <span>黑白名单管理</span>
                </el-menu-item>
              </el-menu>
            </el-col>
          </el-row>
        </el-aside>
        <el-main>
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script lang="ts">
import { Management, Stamp } from "@element-plus/icons-vue";
import { reactive, ref } from "vue";
import { Common } from "@/api/index";
import { ElMessage } from "element-plus";
import { useRouter } from "vue-router";

export default {
  components: {
    Management,
    Stamp
  },
  setup() {

    const router = useRouter();
    router.push({ path: 'sceneManager' })

    return {
    };
  },
};
</script>

<style scoped>

el-menu-item:hover {
    background-color: var(--el-menu-hover-bg-color);
}

.navigate {
  height: 640px;
}


.welcome {
  margin-top: 0px;
  margin-bottom: 0px;
}


.common-layout .el-header {
  
  height: 70px;
  background-color: #d3dce9;
  color: var(--el-text-color-primary);
  text-align: center;
  line-height: 60px;
}
.common-layout .el-footer {
  line-height: 60px;
}

.common-layout .el-aside {
  background-color: #d3dce6;
  color: var(--el-text-color-primary);
  text-align: center;
  line-height: 200px;
}

.common-layout .el-main {
  background-color: #e9eef3;
  color: var(--el-text-color-primary);
  text-align: center;
  /* line-height: 160px; */
}

.common-layout > .el-container {
  /* margin-bottom: 40px; */
}

.common-layout .el-container:nth-child(5) .el-aside,
.common-layout .el-container:nth-child(6) .el-aside {
  line-height: 260px;
}

.common-layout .el-container:nth-child(7) .el-aside {
  line-height: 320px;
}
</style>